<template>

  <div class="component-academic-performance">
    <div class="plugins-course-academic-performance">
      <div class="academic-performance-contain">
        <el-tabs v-model="activeTab"  @tab-click="handleTabClick">
          <el-tab-pane label="总成绩" name="total">
              <div class="total-container"  v-if="activeTab === 'total'">
                <h4>总成绩
                  <span class="total-container-number">{{total}}分</span>
                  <span class="total-container-one">/ 满分 100 分</span>
                  <a class="view-rules">查看成绩计算规则></a>
                </h4>

                  <el-table :data="grades">
                      <el-table-column prop="subject" label="科目"></el-table-column>
                      <el-table-column prop="score" label="成绩">
                        <template v-slot="scope">
                          {{scope.row.score}}分
                        </template>
                      </el-table-column>
                      <el-table-column prop="percentage" label="占比">
                        <template v-slot="scope">
                          {{scope.row.percentage}}%
                        </template>
                      </el-table-column>
                  </el-table>

              </div>
          </el-tab-pane>
          <el-tab-pane label="作业成绩" name="homework">
            <div v-if="activeTab === 'homework'">
              <div class="homework-title">
                <span>作业成绩 </span>
                共{{ homework.totalCount }}个</div>
              <div class="homework-statistics">
                <div class="statistics-cards">
                  <div class="stat-card">
                    <div class="number completed">{{ homework.completed }}</div>
                    <div class="homework-label">已批</div>
                  </div>
                  <div class="stat-card">
                    <div class="number pending">{{ homework.pending }}</div>
                    <div class="homework-label">未批</div>
                  </div>
                  <div class="stat-card">
                    <div class="number unsubmitted">{{ homework.unsubmitted }}</div>
                    <div class="homework-label">未交</div>
                  </div>
                </div>
              </div>
              <div class="homework-list">
                <el-table :data="homeworkList" style="width: 100%">
                  <!-- 作业标题和发布时间列 -->
                  <el-table-column width="500">
                    <template v-slot="scope">
                      <div class="publish-time">{{ scope.row.title }}</div>
                      <div class="publish-time">发布时间 {{ scope.row.publishTime }}</div>
                    </template>
                  </el-table-column>
                  <!-- 分数状态列 -->
                  <el-table-column align="right">
                    <template v-slot="scope">
                      <span class="score-status">{{ scope.row.scoreStatus }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="测试成绩" name="test">
            <div  v-if="activeTab === 'test'">
              <!-- 测试统计部分 -->
              <div class="homework-title"><span>测试成绩 </span> 共{{ testPerformance.totalCount }}个</div>
              <div class="test-statistics">
                <div class="statistics-cards">
                  <div class="stat-card">
                    <div class="number completed">{{ testPerformance.completed }}</div>
                    <div class="test-label">已批</div>
                  </div>
                  <div class="stat-card">
                    <div class="number ongoing">{{ testPerformance.ongoing }}</div>
                    <div class="test-label">未批</div>
                  </div>
                  <div class="stat-card">
                    <div class="number unstarted">{{ testPerformance.unstarted }}</div>
                    <div class="test-label">未交</div>
                  </div>
                </div>
              </div>

              <!-- 测试列表部分 -->
              <div class="test-list">
                <el-table :data="testList" style="width: 100%">
                  <!-- 测试标题和时间列 -->
                  <el-table-column label="测试标题和时间" width="500">
                    <template v-slot="scope">
                      <div class="test-title">{{ scope.row.title }}</div>
                      <div class="test-time">
                        <span>开始时间: {{ scope.row.startTime }}</span>
                        <span style="margin-left: 20px">结束时间: {{ scope.row.endTime }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <!-- 成绩状态列 -->
                  <el-table-column label="成绩状态" align="right">
                    <template v-slot="scope">
                      <span class="score-status">{{ scope.row.scoreStatus }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="互动课件成绩" name="interactive">
            <div v-if="activeTab === 'interactive'">
              <!-- 互动课件统计部分 -->
              <div class="homework-title"><span>互动课件成绩  </span> 共{{ interactivePerformance.totalCount }}个</div>

              <div class="interactive-statistics">
                <div class="statistics-cards">
                  <div class="stat-card">
                    <div class="number completed">{{ interactivePerformance.completed }}</div>
                    <div class="interactive-label">已完成</div>
                  </div>
                  <div class="stat-card">
                    <div class="number learning">{{ interactivePerformance.learning }}</div>
                    <div class="interactive-label">学习中</div>
                  </div>
                  <div class="stat-card">
                    <div class="number unlearned">{{ interactivePerformance.unlearned }}</div>
                    <div class="interactive-label">未学习</div>
                  </div>
                </div>
              </div>

              <!-- 互动课件列表部分 -->
              <div class="interactive-list">
                <el-table :data="interactiveList" style="width: 100%">
                  <!-- 课件标题和发布时间列 -->
                  <el-table-column label="课件标题和发布时间" width="500">
                    <template v-slot="scope">
                      <div class="interactive-title">{{ scope.row.title }}</div>
                      <div class="publish-time">发布时间 {{ scope.row.publishTime }}</div>
                    </template>
                  </el-table-column>
                  <!-- 学习状态列 -->
                  <el-table-column label="学习状态" align="right">
                    <template v-slot="scope">
                      <span class="learn-status">{{ scope.row.learnStatus }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="资料成绩" name="material">
            <div  v-if="activeTab === 'material'">
              <!-- 资料统计部分 -->
              <div class="homework-title"><span>资料成绩  </span>共{{ materialPerformance.totalCount }}个</div>

              <div class="material-statistics">
               <div class="statistics-cards">
                  <div class="stat-card">
                    <div class="number completed">{{ materialPerformance.completed }}</div>
                    <div class="material-label">已完成</div>
                  </div>
                  <div class="stat-card">
                    <div class="number learning">{{ materialPerformance.learning }}</div>
                    <div class="material-label">学习中</div>
                  </div>
                  <div class="stat-card">
                    <div class="number unlearned">{{ materialPerformance.unlearned }}</div>
                    <div class="material-label">未学习</div>
                  </div>
                </div>
              </div>

              <!-- 资料列表部分 -->
              <div class="material-list">
                <el-table :data="materialList" style="width: 100%">
                  <!-- 资料标题和发布时间列 -->
                  <el-table-column width="500">
                    <template v-slot="scope">
                      <div class="material-name">{{ scope.row.title }}</div>
                      <div class="publish-time">发布时间 {{ scope.row.publishTime }}</div>
                    </template>
                  </el-table-column>
                  <!-- 文件类型列 -->
                  <el-table-column align="right">
                    <template v-slot="scope">
                      <span class="file-type">{{ scope.row.fileType }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="互动答题成绩" name="quiz">
            <div  v-if="activeTab === 'quiz'">
              <!-- 互动答题统计部分 -->
              <div class="homework-title"><span>互动答题成绩  </span>共{{ quizPerformance.totalCount }}个</div>

              <div class="quiz-statistics">
                <div class="statistics-cards">
                  <div class="stat-card">
                    <div class="number completed">{{ quizPerformance.graded }}</div>
                    <div class="quiz-label">已批</div>
                  </div>
                  <div class="stat-card">
                    <div class="number pending">{{ quizPerformance.ungraded }}</div>
                    <div class="quiz-label">未批</div>
                  </div>
                  <div class="stat-card">
                    <div class="number unsubmitted" style="color: #ff6b00;">{{ quizPerformance.unsubmitted }}</div>
                    <div class="quiz-label">未交</div>
                  </div>
                </div>
              </div>

              <!-- 答题列表部分 -->
              <div class="quiz-list">
                <el-table :data="quizList" style="width: 100%">
                  <!-- 答题标题和发布时间列 -->
                  <el-table-column width="500">
                    <template v-slot="scope">
                      <div class="quiz-name">{{ scope.row.title }}</div>
                      <div class="publish-time">发布时间 {{ scope.row.publishTime }}</div>
                    </template>
                  </el-table-column>
                  <!-- 答题状态列 -->
                  <el-table-column align="right">
                    <template v-slot="scope">
                      <span class="quiz-status">{{ scope.row.status }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="话题成绩" name="topic">
            <div v-if="activeTab === 'topic'">
              <!-- 话题统计部分 -->
              <div class="homework-title"><span>话题成绩  </span> 共{{ topicPerformance.totalCount }}个</div>

              <div class="topic-statistics">
                <div class="statistics-cards">
                  <div class="stat-card">
                    <div class="number completed">{{ topicPerformance.participated }}</div>
                    <div class="topic-label">参与</div>
                  </div>
                  <div class="stat-card">
                    <div class="number unparticipated" style="color: #ff6b00;">{{ topicPerformance.unparticipated }}</div>
                    <div class="topic-label">未参与</div>
                  </div>
                </div>
              </div>

              <!-- 话题列表部分 -->
              <div class="topic-list">
                <el-table :data="topicList" style="width: 100%">
                  <!-- 话题标题和发布时间列 -->
                  <el-table-column width="500">
                    <template v-slot="scope">
                      <div class="topic-name">{{ scope.row.title }}</div>
                      <div class="publish-time">发布时间 {{ scope.row.publishTime }}</div>
                    </template>
                  </el-table-column>
                  <!-- 参与状态列 -->
                  <el-table-column align="right">
                    <template v-slot="scope">
                      <span class="topic-status">{{ scope.row.status }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="考勤成绩" name="attendance">
            <div   v-if="activeTab === 'attendance'">
              <!-- 考勤统计部分 -->
              <div class="attendance-statistics">
                <div class="attendance-title">考勤</div>
                <div class="statistics-cards">
                  <div class="stat-card">
                    <div class="number normal">{{ attendanceStats.onTime }}</div>
                    <div class="attendance-label">出勤</div>
                  </div>
                  <div class="stat-card">
                    <div class="number late" style="color: #ff6b00;">{{ attendanceStats.late }}</div>
                    <div class="attendance-label">迟到</div>
                  </div>
                  <div class="stat-card">
                    <div class="number early" style="color: #ff6b00;">{{ attendanceStats.earlyLeave }}</div>
                    <div class="attendance-label">早退</div>
                  </div>
                  <div class="stat-card">
                    <div class="number leave" style="color: #409EFF;">{{ attendanceStats.leave }}</div>
                    <div class="attendance-label">请假</div>
                  </div>
                  <div class="stat-card">
                    <div class="number absent" style="color: #ff6b00;">{{ attendanceStats.absent }}</div>
                    <div class="attendance-label">旷课</div>
                  </div>
                </div>
              </div>

              <!-- 考勤列表部分 -->
              <div class="attendance-list">
                <el-table :data="attendanceList" style="width: 100%">
                  <el-table-column width="500">
                    <template v-slot="scope">
                      <div class="course-name">{{ scope.row.courseName }}</div>
                      <div class="attendance-time">考勤时间 {{ scope.row.attendanceTime }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="right">
                    <template v-slot="scope">
                      <span class="attendance-status">{{ scope.row.status }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="表现成绩" name="performance">
            <div v-if="activeTab === 'performance'">

              <div class="el-checkbox-group" v-if="performanceGrade.length > 0">

              </div>
              <div class="component-no_data" v-else>
                <div class="img-box">
                  <el-image class="img" src="https://www.ketangpai.com/img/img_empty.84d0931c.png"></el-image>
                  暂无数据
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data(){
    return{
      grades:[{
        subject:"数据结构",
        score:0,
        percentage:100
      },
        {
          subject: "数据结构",
          score: 10,
          percentage: 100
        }
      ],
      total:0,
      activeIndex: '3', // 默认选中成绩管理
      activeTab: 'total' ,// 默认选中总成绩标签
      homework:{// 作业成绩
        totalCount:0,
        completed: 0,
        pending: 0,
        unsubmitted: 1
      },
      homeworkList: [
        {
        title:'作业1',
        publishTime:'2025.1.16',
        scoreStatus:'0'
        },
        {// 作业成绩列表
          title:'作业2',
          publishTime:'2025.1.16',
          scoreStatus:'100'
        }
      ],
      // 测试成绩统计数据
      testPerformance: {
        totalCount: 5,
        completed: 3,
        ongoing: 1,
        unstarted: 1
      },
      // 测试列表数据
      testList: [
        {
          title: '期末测试',
          startTime: '2024-01-10 14:00',
          endTime: '2024-01-10 16:00',
          scoreStatus: '分数未公布'
        },
      ],
      // 互动课件成绩
      interactivePerformance: {
        totalCount: 0,
        completed: 0,
        learning: 0,
        unlearned: 0
      },
      interactiveList: [
        {
          title: '第一章互动课件',
          publishTime: '2024-01-15 10:00',
          learnStatus: '已完成'
        },
      ],
      materialPerformance: {
        totalCount: 5,
        completed: 4,
        learning: 0,
        unlearned: 1
      },
      materialList: [
        {
          title: '实验报告模板',
          publishTime: '24/11/14 13:59',
          fileType: '.doc'
        },
      ],
      quizPerformance: {
        totalCount: 0,
        graded: 0,
        ungraded: 0,
        unsubmitted: 0
      },
      quizList: [
        {
          title: '第一章测试题',
          publishTime: '2024-01-15 14:30',
          status: '已批'
        },
      ],
      topicPerformance: {
        totalCount: 0,
        participated: 0,
        unparticipated: 0
      },
      topicList: [{
        title:"谈论1",
        publishTime:"2024-01-15 14:30",
        status:"已参与"
      }],
      attendanceStats: {
        onTime: 0,    // 出勤
        late: 0,      // 迟到
        earlyLeave: 0, // 早退
        leave: 0,     // 请假
        absent: 0     // 旷课
      },
      attendanceList: [],
      performanceGrade:[]
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.loadActiveTabData();
    },
    // 添加标签页切换处理方法
    handleTabClick(tab) {
      console.log('Tab clicked:', tab.name); // 调试信息
      this.activeTab=tab.name;
      this.loadActiveTabData();
    },
    // 添加加载当前激活标签页数据的方法
    loadActiveTabData() {
      switch(this.activeTab) {
        case 'total':
          this.getAcademicTotal();
          break;
        case 'homework':
          this.getAcademicHomeworkList();
          break;
        case 'test':
          this.getAcademicTest();
          break;
        case 'interactive':
          this.getAcademicInteractive();
          break;
        case 'material':
          this.getAcademicMaterial();
          break;
        case 'quiz':
          this.getAcademicQuiz();
          break;
        case 'topic':
          this.getAcademicTopic();
          break;
        case 'attendance':
          this.getAcademicPerformance();
          break;
        case 'performance':
          // 如果有表现成绩的方法，在这里调用
          break;
      }
    },
    // 获取总成绩
    getAcademicTotal(){
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/academicPerformance/total', data).then(res => {
        if (res) {
          this.grades=res.data.grades;
          this.total = res.data.totalCount;
        }
      })
    },
    // 获取作业列表
    getAcademicHomeworkList() {
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/classDetail/grade/homework', data).then(res => {
        if (res) {
          this.homeworkList=res.data.homeworkList;
          this.homework=res.data.homework;
        }
      })
    },
    // 获取测试成绩
    getAcademicTest(){
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/classDetail/grade/test', data).then(res => {
        if (res) {
          this.testList=res.data.testList;
        }
      })
    },
    // 获取互动课件成绩
    getAcademicInteractive(){
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/classDetail/grade/interactive', data).then(res => {
        if (res) {
          this.interactiveList=res.data.interactiveList;
        }
      })
    },
    // 获取资料成绩
    getAcademicMaterial(){
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/classDetail/grade/material', data).then(res => {
        if (res) {
          this.materialList=res.data.materialList;
        }
      })
    },
    // 获取互动答题成绩
    getAcademicQuiz(){
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/classDetail/grade/quiz', data).then(res => {
        if (res) {
          this.quizList=res.data.quizList;
        }
      })
    },
    // 获取话题成绩
    getAcademicTopic(){
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/classDetail/grade/topic', data).then(res => {
        if (res) {
          this.topicList=res.data.topicList;
        }
      })
    },
    //   获取考勤成绩
    getAcademicPerformance(){
      const userId = this.$store.getters.user.id;
      const courseId = this.$store.getters.courseId;
      const data = { userId, courseId };
      this.$http.post('/classDetail/grade/performance', data).then(res => {
        if (res) {
          this.attendanceStats=res.data.attendanceStats;
          this.attendanceList=res.data.attendanceList;
        }
      })
    }
  }
}
</script>
<style scoped>
.academic-performance-contain {
  position: relative;
  border-bottom: 1px solid #e4e7ed;
}
/* style部分添加新样式 */
.view-rules {
  float: right;
  font-size: 12px;
  color: #409EFF;
  text-decoration: none;
}

.total-container h4 {
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.total-container-number {
  margin-left: 10px;
  color: #ff6b00;
  font-weight: bold;
}

.total-container-one {
  font-size: 12px;
  color: #909399;
  margin-left: 5px;
}
.total-left{
  width: 10%;
}
.second-title :hover{
  color: #40a9ff;
  border-bottom: 1px solid #40a9ff;
}
.component-academic-performance {
  width: 100%;
}
.homework-statistics {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}
.homework-title {
  font-size: 14px;
  color: #000000;
  margin-bottom: 20px;
}
.stat-card {
  text-align: center;
}
.number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}
.completed {
  color: #67C23A;
}
.pending {
  color: #909399;
}
.unsubmitted {
  color: #F56C6C;
}
.homework-label {
  font-size: 14px;
  color: #606266;
}

.homework-list {
  padding: 20px;
  margin-top: 25px;
}
.homework-title span{
  font-size: 20px;
}
.score-status {
  font-size: 14px;
  color: #909399;
}
.el-table td,
.el-table th {
  border: none;
}
.el-table tbody tr:hover > td {
  background-color: #f5f7fa;
}
.interactive-statistics {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.interactive-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.completed {
  color: #67C23A;
}

.learning {
  color: #E6A23C;
}

.unlearned {
  color: #909399;
}

.interactive-label {
  font-size: 14px;
  color: #606266;
}

.interactive-list {
  margin-top: 20px;
}

.interactive-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
  cursor: pointer;
}

.interactive-title:hover {
  color: #409EFF;
}


.learn-status {
  font-size: 14px;
  color: #909399;
}

.test-statistics {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.test-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.statistics-cards {
  display: flex;
  gap: 40px;
}

.stat-card {
  text-align: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.completed {
  color: #67C23A;
}

.ongoing {
  color: #E6A23C;
}

.unstarted {
  color: #909399;
}

.test-label {
  font-size: 14px;
  color: #606266;
}

.test-list {
  margin-top: 20px;
}

.test-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
  cursor: pointer;
}

.test-title:hover {
  color: #409EFF;
}

.test-time {
  font-size: 12px;
  color: #909399;
}

.score-status {
  font-size: 14px;
  color: #909399;
}
.material-statistics {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.material-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.statistics-cards {
  display: flex;
  gap: 40px;
}

.stat-card {
  text-align: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.completed {
  color: #67C23A;
}

.learning {
  color: #E6A23C;
}

.unlearned {
  color: #909399;
}

.material-label {
  font-size: 14px;
  color: #606266;
}

.material-list {
  margin-top: 20px;
}

.material-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
  cursor: pointer;
}

.material-name:hover {
  color: #409EFF;
}

.file-type {
  font-size: 14px;
  color: #909399;
}
.topic-statistics {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.topic-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.completed {
  color: #67C23A;
}
.quiz-statistics {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.quiz-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.statistics-cards {
  display: flex;
  gap: 40px;
}

.stat-card {
  text-align: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.completed {
  color: #67C23A;
}

.pending {
  color: #E6A23C;
}

.quiz-label {
  font-size: 14px;
  color: #606266;
}

.quiz-list {
  margin-top: 20px;
}

.quiz-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
  cursor: pointer;
}

.quiz-name:hover {
  color: #409EFF;
}


.quiz-status {
  font-size: 14px;
  color: #909399;
}

.topic-label {
  font-size: 14px;
  color: #606266;
}

.topic-list {
  margin-top: 20px;
}

.topic-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
  cursor: pointer;
}

.topic-name:hover {
  color: #409EFF;
}

.publish-time {
  font-size: 10px;
  color: #000000;
}

.topic-status {
  font-size: 14px;
  color: #909399;
}
.attendance-statistics {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.attendance-title {
  float: left;
  margin-right: 20px;
  margin-top: 10px;
  font-size: 24px;
  color: #000000;
  margin-bottom: 20px;
}
.statistics-cards {
  display: flex;
  gap: 40px;
}

.stat-card {
  text-align: center;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.normal {
  color: #67C23A;  /* 绿色 - 出勤 */
}

.attendance-label {
  font-size: 14px;
  color: #606266;
}

.attendance-list {
  margin-top: 20px;
}

.course-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
}

.attendance-time {
  font-size: 12px;
  color: #909399;
}

.attendance-status {
  font-size: 14px;
  color: #909399;
}

/* 数字动画效果 */
.number {
  transition: all 0.3s;
}

/* 响应式布局优化 */
@media screen and (max-width: 768px) {
  .statistics-cards {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-card {
    flex: 1 1 calc(50% - 20px);
    min-width: 120px;
  }
}
.empty-state i {
  font-size: 48px;
  margin-bottom: 20px;
}
.component-no_data {
  height: max-content;
  padding-top: 100px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #74787c;
  line-height: 24px;

  .img-box {
    padding-bottom: 12px;

    .img {
      height: 250px;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>